@import url("http://fonts.googleapis.com/css?family=Quicksand:300");
body {
  margin: 0;
  padding: 0;
  background: url("../assets/images/dark_wood.webp") center/cover;
  font-family: "Quicksand", sans-serif;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 20px;
  font-size: 6em;
  color: #ff005b;
  color: #fff;
  /* 先在文字周围生成集中度较高的阴影效果*/
  text-shadow: 0 0 20px #ff005b;
}

h1::after {
  /* 
        CSS表达式 attr() 
            1. 用来获取选择到的元素的某一HTML属性值，并用于其样式。
            2. 也可以用于伪元素，属性值采用伪元素依赖的元素
        ref: [attr - CSS（层叠样式表） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr())
        注意：attr()通常只用于CSS content属性，虽然理论上可以用于任何CSS属性

        这里是获取h1的data-text属性值，虽然完全可以手动输入，但是这可能也是后面JS中的一种响应式修改数据的需求吧
    */
  content: attr(data-text);

  /* 设置了绝对定位以后，元素默认为块元素 */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 20px;

  /* 然后在文字周围生成弥散度较高的阴影效果*/
  /* 
    将文字的颜色设置为与文字阴影相同的颜色，并且设置较高的模糊(blur)值：相当于
    以文字和文字轮廓为参考，生成一个弥散的模糊光线效果
  */
  color: #ff005b;
  z-index: -1;
  filter: blur(15px);
}

h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 最后在文字底部和周围添加一层模糊的淡淡的环绕光 */
  background-color: #ff005b;
  opacity: 0.5;
  filter: blur(40px);
  z-index: -2;
}
